<template>
  <el-table-column v-if="attrs.type !== 'selection' && attrs.type !== 'index'" :align="alginText" v-bind="attrs">
    <template slot-scope="scope">
      <!-- 显示缩略图 -->
      <template v-if="attrs.type === 'img'">
        <el-image
          v-if="_get(scope.row, attrs.prop)"
          :src="_get(scope.row, attrs.prop)"
          :style="imgSize"
          fit="cover"
          :preview-src-list="[_get(scope.row, attrs.prop)]"
        />
        <span v-else>{{ emptyHolder }}</span>
      </template>
      <!-- 自定义显示数据 -->
      <slot v-else-if="attrs.custom" :name="attrs.custom" v-bind="scope"></slot>
      <!-- 基础数据显示 -->
      <template v-else>
        <template v-if="attrs.formatter">{{ attrs.formatter(scope.row, scope.column, _get(scope.row, attrs.prop)) || emptyHolder }}</template>
        <template v-else>{{ _get(scope.row, attrs.prop) === 0 || _get(scope.row, attrs.prop) ? _get(scope.row, attrs.prop) : emptyHolder }}</template>
      </template>
    </template>
  </el-table-column>
  <el-table-column v-else align="center" v-bind="attrs"></el-table-column>
</template>

<script>
  import _get from 'lodash/get'
  export default {
    props: {
      attrs: {
        type: Object,
        default() {
          return {}
        }
      },
      // 空值 占位符
      emptyPlaceholder: {
        type: String,
        default() {
          return '--'
        }
      },
      alignItem: {
        type: String,
        default() {
          return ''
        }
      }
    },
    data() {
      return {
        emptyHolder: this.emptyPlaceholder,
        alginText: ''
      }
    },
    computed: {
      imgSize() {
        return {
          width: `${this.attrs.imageWidth || 80}px`,
          height: `${this.attrs.imageHeight || 40}px`
        }
      }
    },
    created() {
      if (this.attrs)
        if (this.alignItem === 'left') {
          this.alginText = this.alignItem
        } else {
          this.alginText = 'center'
        }
    },
    methods: {
      _get
    }
  }
</script>

<style scoped></style>
